<template>
	<view>
		<view class="container column align-items-center">
			<image src="/static/icon_error@3x.png" style="width: 120rpx;height: 120rpx;margin: 0rpx auto;" mode="">
			</image>
			<view class="" style="text-align: center;font-size: 42rpx;font-weight: 800;margin-top: 50rpx;">
				将{{userInfo.phonenumber?userInfo.phone:userInfo.wxNickname}}所绑定的账号注销
			</view>
			<view class="" style="text-align: center;font-size: 32rpx;color: #626262;margin-top: 30rpx;">
				注意！注销账号以后以下信息将被清空且无法找回
			</view>
			<view class="" style="padding: 20rpx 30rpx;border-radius: 15rpx;border: solid 1rpx #848484;margin-top: 50rpx;">
				<view  style="flex: 1;width: 600rpx;border-bottom: solid 1rpx #eee;padding: 10rpx 0rpx;">
					<checkbox-group @change="checkboxChange">
						<label class="row" style="padding: 15rpx 0rpx;align-items: center;" v-for="item in items" :key="item.value">
							<view>
								<checkbox  :value="item.value" :checked="item.checked" />
							</view>
							<view style="margin-left: 20rpx;">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="" style="text-align: center;padding: 15rpx 0rpx;color: #626262;font-size: 28rpx;padding-top: 30rpx;">
					勾选以上项目，以确保您已了解所有将清空的内容
				</view>
			</view>
			<view class="button text-base" @click="confirm" :class="isActive?'active':'not-active'" >
				下一步
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" :beforeClose="true" title="提示" :buttonArr="['取消','确定']" content="确定注销账号?" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: '0',
						name: '身份、账号信息'
					},
					{
						value: '1',
						name: '预约回收信息'
					},
					{
						value: '2',
						name: '交易记录'
					},
					{
						value: '3',
						name: '云豆、正能量等'
					},
				],
				userInfo:{},
				isActive:false,
				count:0
			};
		},
		onShow() {
			this.userInfo = uni.getStorageSync(this.$util.USER_INFO)
			if (this.userInfo.phonenumber) {
				this.userInfo.phone = this.$util.noPassByMobile(this.userInfo.phonenumber + "")
			}
		},
		methods: {
			confirm(){
				if(this.isActive){
					this.$refs.alertDialog.open()
				}else {
					this.$util.showInfoToast("勾选以上项目，以确保您已了解所有将清空的内容")
				}
				
			},
			dialogConfirm() {
				let date_1 = new Date()
				let date_2 = new Date(this.userInfo.createTime)
				let Days = this.getDiffDay(date_1,date_2);
				if(Days<=30){
					this.$util.showInfoToast("新注册用户30天内不能注销")
					return
				}
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			getDiffDay(date_1, date_2) {
			  // 计算两个日期之间的差值
			  let totalDays,diffDate
			  let myDate_1 = date_1.getTime()
			  let myDate_2 = date_2.getTime()
			  // 将两个日期都转换为毫秒格式，然后做差
			  diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值
			 
			  totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
			  // console.log(totalDays)    
			 
			  return totalDays    // 相差的天数
			},
			checkboxChange(e) {
				this.count=0
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
					if(item.checked){
						this.count++
						if(this.count>=4){
							this.count = 4;
						}
					}
				}
				console.log(this.count)
				if(this.count>=4){
					this.isActive = true
				}else {
					this.isActive = false
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx 25rpx;
	}
	
	.button{
		width: 90%;
		flex: 1;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50rpx;
		margin-top: 80rpx;
		
		&.active{
			background: $index-bg-bottom;
			color: #ffffff;
		}
		&.not-active{
			background: #F1F0F0;
			color: #B0B0B0;
		}
	}
</style>
